<template>
    <div class="project_edit" v-if="myDetailData">
        <div class="edit_image">
            <div class="edit_title">项目封面</div>
            <div class="edit_upload_image">
                <div class="image">
                    <img :src="myDetailData.image" alt="" />
                </div>
                <div class="action">
                    <el-upload
                        class="upload-demo"
                        multiple
                        :limit="3"
                        action="/api/tools/saveavatar"
                        :before-upload="beforeUpload"
                    >
                        <el-button size="small" type="primary"
                            >点击上传</el-button
                        >
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div>
                    </el-upload>
                </div>
            </div>
        </div>
        <div class="edit_content">
            <div class="edit_left">
                <div class="edit_title">项目名称</div>
                <el-input v-model="myDetailData.title"></el-input>
            </div>
            <div class="edit_right">
                <div class="edit_title">项目进度（%）</div>
                <el-input v-model="myDetailData.plan"></el-input>
            </div>
            <div class="edit_bottom">
                <div class="edit_title">项目简介</div>
                <el-input
                    type="textarea"
                    row="10"
                    v-model="myDetailData.content"
                ></el-input>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">保存</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    props: ['detailData'], // 子组件不能修改props中的值 否则就不是单向数据流了  所以只能通过父组件来修改
    data() {
        return {
            myDetailData: {},
        }
    },
    // created 只会触发一次 因为是通过display控制的显示隐藏
    // 理解生命周期的运行机制
    created() {
        this.myDetailData = JSON.parse(JSON.stringify(this.detailData))
        // /api/tools/saveavatar
    },
    watch: {
        detailData() {
            this.myDetailData = JSON.parse(JSON.stringify(this.detailData))
        },
    },
    methods: {
        beforeUpload(file) {
            let fd = new FormData() //通过form数据格式来传
            fd.append('file', file) //传文件
            axios
                .post('/api/tools/saveavatar', fd)
                .then((res) => {
                    let data = res
                    if (data.code == 200) {
                        this.myDetailData.image = data.data.file
                        this.$message({
                            message: '上传成功',
                            type: 'success',
                        })
                    } else {
                        this.$message.error('message')
                    }
                })
                .catch((error) => {
                    // console.log(error);
                })
        },
        submit() {
            this.$api.editList(this.myDetailData).then((res) => {
                if (res.code === 1) {
                    this.$emit('closeDialog')
                    this.$emit('updateList')
                }
            })
        },
    },
}
</script>

<style lang='scss'>
.project_edit {
    .edit_title {
        font-size: 18px;
        line-height: 35px;
    }
    .edit_image {
        .edit_upload_image {
            display: flex;
            .image {
                width: 300px;
                height: 150px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .action {
                padding-left: 20px;
                flex: 1;
            }
        }
    }
    .edit_content {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        .edit_left,
        .edit_right {
            width: 50%;
            padding-right: 20px;
        }
        .edit_bottom {
            width: 100%;
            padding-right: 20px;
        }
    }
    .edit_author {
        margin-top: 40px;
    }
}
</style>